// 📁 文件位置：config/webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
  // 开发模式
  mode: 'development',
  
  // 源码映射
  devtool: 'eval-cheap-module-source-map',
  
  // 模块处理规则（开发环境特定）
  module: {
    rules: [
      // CSS 处理（开发环境使用 style-loader）
      {
        test: /\.css$/,
        use: [
          'style-loader',  // 开发环境使用 style-loader 支持热更新
          'css-loader',
          'postcss-loader'
        ]
      },
      
      // Less 处理（开发环境使用 style-loader）
      {
        test: /\.less$/,
        use: [
          'style-loader',  // 开发环境使用 style-loader 支持热更新
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      }
    ]
  },
  
  // 开发服务器配置
  devServer: {
    port: 8080,                    // 端口号
    open: true,                    // 自动打开浏览器
    hot: true,                     // 热模块替换
    compress: true,                // 启用 gzip 压缩
    historyApiFallback: true,      // 支持 HTML5 History API
    static: [
      {
        directory: path.join(__dirname, '../public'),  // 静态文件目录
        publicPath: '/'
      },
      {
        directory: path.join(__dirname, '../node_modules/@shoelace-style/shoelace/dist'),
        publicPath: '/node_modules/@shoelace-style/shoelace/dist'
      }
    ],
    proxy: {//代理跨域
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  
  // 插件配置
  plugins: [
    // 热模块替换插件
    new webpack.HotModuleReplacementPlugin(),
    
    // 构建进度插件
    new webpack.ProgressPlugin(),
    
    // HTML 插件（开发环境配置）
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
      inject: 'body'
    })
  ],

  // 开发环境优化配置
  optimization: {
    removeAvailableModules: false,  // 跳过可用模块检查
    removeEmptyChunks: false,       // 跳过空chunk检查
    splitChunks: false              // 开发环境禁用代码分割以提升速度
  },

  // 缓存配置
  cache: {
    type: 'memory'  // 开发环境使用内存缓存
  }
});

/**
 * 开发环境配置说明
 * 
 * 与生产环境的主要区别：
 * 1. CSS 处理：使用 style-loader 而非 MiniCssExtractPlugin，支持热更新
 * 2. 源码映射：使用 eval-cheap-module-source-map，平衡构建速度和调试体验
 * 3. 缓存策略：使用内存缓存，重启后清空
 * 4. 文件名策略：不使用 hash，加快构建速度
 * 
 * 使用建议：
 * - 开发时运行：npm run dev
 * - 支持热更新，修改代码后自动刷新
 * - 代理配置可根据后端 API 地址调整
 * 
 * 重要提醒：
 * 1. 热更新需要在代码中添加 HMR 接受逻辑
 * 2. 代理配置中的 target 需要根据实际后端地址修改
 * 3. 如果端口 8080 被占用，会自动使用下一个可用端口
 * 4. static 目录用于存放不需要处理的静态文件
 */